<template>

    <div class="data-share-container">

        <div class="share-panel">

            <div class="title">
                数据分享

                <div class="close-icon" @click="close">
                    <i class="iconfont icon-close"></i>
                </div>

            </div>

            <div class="form-container">
                <div class="sub-title">选择分享方式</div>
                <div class="share-options">

                    <g-scrollbar class="share-vertical-scroll">
                        <div class="groups">
                            <!-- <g-checkbox key="public" value="public" :model="shareGroups" v-on:change="setVal">分享给所有人</g-checkbox> -->
                            <g-checkbox key="org" value="org" :model="shareGroups" v-on:change="setVal" :disabled="shareGroups.includes('public')">组织内分享</g-checkbox>
                            <g-checkbox
                                v-for="(option, index) in groups"
                                :key="option.key"
                                :value="option.key"
                                :model="shareGroups"
                                v-on:change="setVal"
                                :disabled="shareGroups.includes('public') || shareGroups.includes('org')"
                                >{{option.name}}</g-checkbox>
                        </div>
                    </g-scrollbar>

                    <div v-if="waiting" class="waiting-panel">
                        <i class="iconfont icon-loading icon-spin"></i>
                    </div>

                </div>
                <!-- <div class="share-scope">
                    <g-checkbox key="editor-allowed" :model="allowWrite" v-on:change="setEditor">允许编辑</g-checkbox>
                    <g-checkbox key="download-allowed" :model="allowDownload" v-on:change="setDownload">允许下载</g-checkbox>
                </div> -->
            </div>

            <div class="button-container">
                <g-button @click="close" >取消</g-button>
                <g-button class="confirm-btn" type="primary" @click="share" :disabled="waiting" :loading="loading">{{loading ? '操作中...' : '确定'}}</g-button>
            </div>
        </div>

    </div>
</template>

<script>

    import Bus from '@/utils/event_bus'
    import GCheckbox from 'components/common/g-checkbox'
    import GRadio from 'components/common/g-radio'
    import GScrollbar from 'components/common/g-scrollbar'
    import GButton from 'components/common/g-button'
    import {groupData as groupDataAPI} from '@/api'

    export default {

        data: function() {
            return {
                sharing: false,
                allowWrite: false,
                allowDownload: false,
                shareGroups: [],
                range: '',
                
                waiting: false,
                loading: false,

                range_bak:'',
                shareGroups_bak: [],
            }
        },

        components:{
            GCheckbox,
            GRadio,
            GButton,
            GScrollbar
        },

        props:{
           shareData: Object,
           groups: Array
        },

        async mounted () {
            await this.getShared();
        },

        methods: {

            close() {
                this.$emit('close-share');
            },

            async getShared () {

                this.waiting = true;

                let result = await groupDataAPI.shared(this.shareData.uid);

                if (!result || result.data.code != 0) {
                    this.close();
                    this.waiting = false;
                    this.$message.error('获取分享信息失败');
                    return;
                }

                let data = result.data.data;

                let shared = data.map(n => n.range);

                if (shared.includes('public')) {
                    this.range = 'public';
                    this.shareGroups = ['public'];
                } else if (shared.includes('org')) {
                    this.range = 'org';
                    this.shareGroups = ['org'];
                } else if (shared.includes('group')) {
                    this.range = 'group';
                    this.shareGroups = data.map(n => n.rangeUid);
                }

                this.range_bak = this.range;
                this.shareGroups_bak = this.shareGroups.sort().toString() || [];

                this.waiting = false;

            },

            async share () {
                
                // 没变化
                if (this.range_bak === this.range && this.shareGroups.sort().toString() == this.shareGroups_bak) {
                    this.close();
                    return;
                };

                this.loading = true;
                let dataUid = this.shareData.uid;
                let result, msg;
                // 取消所有分享
                if (!this.range) {
                    result = await groupDataAPI.remove({dataUid});
                    msg = '取消分享'
                } else {
                    let params = {
                        dataUid,
                        range: this.range,
                        allowWrite: this.allowWrite,
                        allowDownload: this.allowDownload
                    }

                    if (this.range === 'group') {
                        params.rangeUids = this.shareGroups;
                    }

                    result = await groupDataAPI.share(params);
                    msg = '分享'
                }

                if (!result) {
                    this.$message.error(msg + '失败');
                    this.loading = false;
                    return;
                }

                if (result.data.code != 0) {
                    this.$message.error(result.data.msg || msg + '失败');
                    this.loading = false;
                    return;
                }

                this.close();

                this.$message.success(msg + '成功');
                this.loading = false;
                Bus.$emit('summary-reset');
                Bus.$emit('group-data-reset');
            },

            setVal (val) {

                if (val.includes('public')) {
                    this.shareGroups = ['public'];
                    this.range = 'public';
                    return;
                }

                if (val.includes('org')) {
                    this.shareGroups = ['org'];
                    this.range = 'org';
                    return;
                }

                this.shareGroups = val;
                this.range = !!val.length ? 'group' : '';

            },
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" >

    @import "common";

    .data-share-container {

        // @include absolute (0px, 0px, 0px, 0px);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1002;
        background: rgba(0, 0, 0, .5);

        .share-panel{
            position: absolute;
            left: 20px;
            right: 20px;
            width: 424px;
            margin: 0 auto;
            top: 50%;
            transform: translateY(-50%);
            // height: 300px;
            background: $bgWhite;
            z-index: 10;
            border-radius: $bdRadius;
            box-shadow:0 4px 10px 1px rgba(48,59,70,0.20);
            @include user-select(none);

            div{
                @include box-sizing(border-box);
            }

            >.title {

                overflow: hidden;
                width: 100%;
                height: 50px;
                line-height: 48px;
                font-size: $fontSizeBase;
                font-weight: 500;
                padding: 0 14px 0 24px;
                position: relative;
                background-color: $bgWhite;
                border-top-left-radius: $bdRadius;
                border-top-right-radius: $bdRadius;
                border-bottom: 1px solid $bdGray;

                .close-icon{
                    float: right;
                    cursor: pointer;

                    &:hover{
                        color: $primary;
                    }

                    >i {
                        font-size: 20px;
                    }
                }
            }

            >.form-container {
                padding: 40px 24px 18px;
                // background-color: $bgMessage;
                font-size: $fontSizeSmall;
                position: relative;

                .sub-title {
                    font-size: $fontSizeMini;
                    color: #545e65;
                    position: absolute;
                    top: 12px;
                    left: 24px;
                }

                .share-options {

                    height: 140px;
                    border: 1px solid $bdGray;
                    border-radius: $bdRadius;
                    background-color: #fff;
                    position: relative;

                    .groups {
                        padding: 16px;
                        overflow: hidden;

                        >label {
                            display: block;
                            margin-bottom: 8px;
                        }
                    }

                    >.share-vertical-scroll {
                        width: 100%;
                        height: 100%;

                        .g-scrollbar-scrollbar-vertical{
                            width: 6px !important;
                            .scrollbar.g-scrollbar-transition {
                                width: 6px !important;
                                border-radius: 3px;
                            }
                        }

                        .scrollbar{
                            display: block !important;
                            width: 6px !important;
                            background-color: #9e9e9e;
                        }

                        
                    }

                    .waiting-panel {
                        @include absolute (0px, 0px, 0px, 0px);
                        background: rgba(255, 255, 255, .5);
                        line-height: 130px;
                        text-align: center;

                        >i {
                            color: $gray;
                        }
                    }
                }

                // .share-scope {

                //     padding: 10px 0;

                //     >label { 
                //         display: inline-block;
                //         margin-right: 24px;
                //     }
                // }
                
            }

            .button-container {
                padding: 0 24px 12px;
                // background-color: $bgMessage;
                text-align: right;
                height: 50px;

                .confirm-btn {
                    margin-left: 10px;
                }
            }

        }

    }

</style>
